<template>
  <div class="content">
    <header>
      <ul><li @click="back()" class="grey"><img class="back-icon" src="~assets/img/icon_l@2x.png" alt=""> 返回</li><li><h2 style="font-size:16px">{{$parent.title}}</h2></li><li></li></ul>
    </header>
    <div class="mb" @click="closeShare()" v-if="showShare"></div>
    <div class="recommond-content">
      <div class="rec-title tc">
        <router-link tag="div" to="/rec_total" class="rec-left"><img src="~assets/img/recommond/icon_rec.png" alt="推荐统计"><span>推荐统计</span></router-link>
        <router-link tag="div" to="/rec_rule" class="rec-right"><img src="~assets/img/recommond/icon_rules.png" alt="活动规则"><span>活动规则</span></router-link>
      </div>
      <!-- 扫码界面 -->
      <div class="content-center tc">
        <p class="slogan">立刻行动，拿推荐奖</p>
        <p class="rec-num">我的推荐数：<span v-text="recoNum + '个'"></span></p>
        <div class="code-wrap" id="qrcode" style="margin-top:15px;">
          <!-- <img src="~assets/img/recommond/er_code.png" alt="二维码"> -->
        </div>
        <!-- <div class="total-income">
          <div class="total-income-money">累计收入：<span v-text="totalMoney"></span></div>
          <router-link tag="div" to="/rec_total" class="income-more"><span>查看更多</span><img src="~assets/img/icon_arr_green.png" alt="" class=""></router-link>
        </div> -->
        <div class="share-bottom tc">
          <ul>
            <li class="share-li" @click="share()">分享社交平台</li>
          </ul>
          <div class="share-info" v-show="showShare" id="share">
            <a ref="shareQQ" href="" target="_blank" class="shareQQ"><img src="~assets/img/qq.png" alt="分享qq"><span>QQ</span></a>
            <a ref="shareSpace" href="" target="_blank" class="shareSpace"><img src="~assets/img/qq_space.png" alt="分享qq空间"><span>QQ空间</span></a>
            <a ref="sharesina" href="" target="_blank" class="sharesina"><img src="~assets/img/weibo.png" alt="分享微博"><span>微博</span></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import { apiPost } from 'src/common/api.js'
export default {
  data () {
    return {
      recInfo: {},
      recoNum: 0,
      totalMoney: 0,
      showShare: false,
      codeUrl: 'www.test.com',
      inviterCode: null
    }
  },
  watch: {
    codeUrl (news, old) {
      console.log(news, old)
    }
  },
  created () {
  },
  mounted () {
    this.getRecInfo()
  },
  methods: {
    // 导航返回
    back () {
      this.$router.push('/user')
    },
    share () {
      this.showShare = true
    },
    closeShare () {
      this.showShare = false
    },
    shareCode () {
      let href = window.location.href
      this.$refs.sharesina.href = 'http://v.t.sina.com.cn/share/share.php?url=' + href
      this.$refs.shareSpace.href = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + href
      this.$refs.shareQQ.href = 'http://connect.qq.com/widget/shareqq/index.html?url=' + href
    },
    // 二维码
    qrcode () {
      let qrcode = new QRCode(document.getElementById('qrcode'), {
        width: 225,
        height: 225, // 高度
        text: this.inviterCode // 二维码内容
      })
      // console.log(qrcode)
    },
    // 获取直推主页面内容
    getRecInfo () {
      apiPost('user_recommend',{}).then((res) => {
        if (res.status === 0) {
          this.recInfo = res.data
          this.recoNum = this.recInfo.reco_num
          this.totalMoney = this.recInfo.total_money
          // 微信二维码链接
          this.inviterCode = `http://shop.aixinjituan.com/login?ref_code=${this.recInfo.inviter_code}`
          // 生成二维码
          this.qrcode()
          this.shareCode()
        } else {
          console.log(res.msg)
        }
      })
    }
  }
}
</script>
<style scoped lang='scss'>
  @import '~lib/reset.scss';
  #qrcode {
    width: 225px;
    height: 225px;
    img {
      width: 225px;
      height: 225px;
    }
  }
    // 蒙版
  .mb {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0,.4);
    position: absolute;
    top: 0;
  }
  #copy {
    position: absolute;
    height: 0;
    // display: none;
    opacity: 0;
  }
  .recommond-content {
    .rec-title {
      margin-top: 10px;
      display:flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      border-bottom: 1px solid #e5e5e5;
      font-size:  $font-15;
      letter-spacing: 2px;
      .rec-left,.rec-right {
        flex: 1;
        font-size: $font-18;
        padding: 16px 0;
        img {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }
      }
    }
    .content-center {
      .slogan {
        font-size: 24px;
        margin:25px auto;
        letter-spacing: 2px;
      }
      .rec-num {
        font-size: $font-18;
        color: $color-font-two;
      }
      .code-wrap {
        margin: 25px auto;
        img {
          width: 225px;
          height: 225px;
        }
      }
      .invite-code {
        font-size: $font-18;
        margin-bottom: 25px;
      }
      .total-income {
        display: flex;
        padding: 0 16px 70px 16px;;
        font-size: $font-12;
        justify-content: space-between;
        .income-more {
          span {
            vertical-align: middle;
          }
          img {
            width: 8px;
            height: 12px;
            margin-left: 10px;
          }
        }
      }
    }
    .share-bottom {
      ul {
        display: flex;
        justify-content: center;
        align-items: center;
        li {
          flex: 1;
          padding: 16px 0 ;
          font-size: $font-18;
          &.share-li  {
            background-color: $color-bg;
            color: #fff;
          }
          background-color: #fff;
        }
      }
      .share-info {
        margin-top: -158px;
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        height: 160px;
        a {
          flex: 1;
          color: #999;
          span {
            display: block;
            font-size: $font-12;
            margin-top:10px;
          }
          img {
            width: 30px;
          }
        }
      }
    }
  }
</style>
